<!--绑定手机号码-->
<template>
  <div class="page">
    <div class="header">
      <span class="header-title">绑定手机号</span>
    </div>
    <div class="content">
      <div class="background">
        <div class="input-box">
          <div>
            <input type="text" placeholder="请输入您的手机号" v-model="bindParameter.mobile">
          </div>
          <div>
            <div class="verification-code">
              <div style="text-align: center">
                <span style="color:#25a4bb;float: left">|</span>
                <a v-if="isShowVerificationCodeCountdown">{{verificationCodeCountdown}}</a>
                <a v-else @click="getVerificationCode()">获取验证码</a>
              </div>
            </div>
            <input class="verification-code-input" v-model="bindParameter.code" type="text" placeholder="请输入短信验证码">

          </div>
          <div class="submit">
            <button class="btn-submit" @click="bindSure()" :disabled="isBtnDisabled">登录</button>
          </div>
          <div class="attention">
            <a class="btn-attention" @click="attention()">
              关注职场官公众号
            </a>
          </div>
        </div>

      </div>
      <!--      <div style="width: 100%;text-align: center;line-height: 0.8rem;padding-top: 1rem">
              <div style="color: white;font-size: 0.4rem">肃清职场环境  护航企业发展</div>
              <div style="color: white;font-size: 0.4rem">提升职场素养 加速职位晋升</div>
            </div>-->

    </div>

    <van-popup v-model="isShowQRCode">
      <img src="../../../static/imgs/QR_code.png" style="width: 100%">
    </van-popup>
  </div>

</template>

<script>
  export default {
    data() {
      return {
        verificationCodeCountdown: 60,
        isShowVerificationCodeCountdown: false,
        isShowQRCode: false, //是否显示公众号
        bindParameter: {},
        isBtnDisabled: false,
      }
    },
    created() {
      // this.bindParameter = this.$store.state.bindPhoneParams;
      this.bindParameter = JSON.parse(localStorage.setBindPhoneParams);
      if (!this.bindParameter.wx_openid) {
        location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxc1016fb26f10cbf0&redirect_uri=http://www.hrgsxt.cn/wx/index.html&response_type=code&scope=snsapi_userinfo&state=0#wechat_redirect';
      }
      // let page = document.getElementsByClassName('page')[0];
      // page.style.height = $(window).height() + "px";

      window.onload = function (e) {
        var _body = document.getElementsByTagName('body')[0];
        _body.style.height = $(window).height() + "px";
        _body.style.width = $(window).width() + "px";
        console.log('++++++', _body.clientHeight, _body.style.height);
        let page = document.getElementsByClassName('page')[0];
        page.style.height = $(window).height() + "px";
      }
    },
    mounted() {
      let page = document.getElementsByClassName('page')[0];
      page.style.height = $(window).height() + "px";
    },
    methods: {
      attention() {  //关注公众号
        this.isShowQRCode = true;
      },
      getVerificationCode() { //获取验证码
        if (this.bindParameter.mobile == "") {
          this.$toast({
            message: '手机号码不能为空',
          });

        } else if (this.bindParameter.mobile != "") {
          var reg = /^1[3456789]\d{9}$/;
          if (!reg.test(this.bindParameter.mobile)) {
            this.$toast({
              message: '请输入有效的手机号码',
            });
          } else {
            this.isShowVerificationCodeCountdown = true;
            this.verificationCodeCountdown = 60;
            this.sendMessages();
            let interval = setInterval(() => {
              if (this.verificationCodeCountdown <= 0) {
                clearInterval(interval);
                this.isShowVerificationCodeCountdown = false;
              } else {
                this.verificationCodeCountdown--;
              }
            }, 1000);
          }
        }
      },
      sendMessages() { //发送验证码
        this.$http.post('api/Login/send_sms', {mobile: this.bindParameter.mobile}).then(response => {
          this.$toast({
            message: '发送成功',
          });
        }).catch(error => {
          this.$toast({
            message: '发送失败',
          });
        })
      },
      bindSure() {//确定绑定手机
        var that = this;
        if (!this.bindParameter.mobile) {
          this.$toast({
            message: '请输入手机号',
          });
        } else {
          var reg = /^1[3456789]\d{9}$/;
          if (!reg.test(that.bindParameter.mobile)) {
            this.$toast({
              message: '请输入有效的手机号码',
            });
            return
          }
        }
        if (!this.bindParameter.code) {
          this.$toast({
            message: '请输入验证码',
          });
        } else {
          console.log('提交的东西', that.bindParameter);
          let loadNotify = this.$toast.loading({
            mask: true,
            message: '加载中...',
            duration: 5000,
          });
          this.isBtnDisabled = true;
          $.ajax({
            type: "post",
            url: "http://zcapi.hrgsxt.cn/api/Weixin/bind",
            data: that.bindParameter,
            cache: false,
            dataType: "json",
            success: function (data) {
              that.isBtnDisabled = false;
              console.log('>>>>>>>>>>>>>绑定手机号', data);
              if (data.code == 200) {
                loadNotify.clear();
                that.$toast({
                  message: '绑定成功',
                });
                localStorage.removeItem('setBindPhoneParams');
                location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxc1016fb26f10cbf0&redirect_uri=http://www.hrgsxt.cn/wx/index.html&response_type=code&scope=snsapi_base&state=0#wechat_redirect';
                // location.href = "http://www.hrgsxt.cn/wx/index.html";
              } else {
                that.$toast({
                  message: '绑定失败',
                });
              }
            },
            error: error => {
              that.isBtnDisabled = false;
              that.$toast({
                message: '绑定失败',
              });
            }
          });
        }

      }

    },
  }
</script>

<style scoped>
  .page {
    /*height: 100vh;*/
    /*position: absolute;*/
    /*width: 100vw;*/
  }

  .header {
    height: 7%;
    background: rgba(0, 133, 240, 1);
    text-align: center;
    color: white;
    line-height: .88rem;
  }

  .content {
    line-height: .88rem;
    height: 93%;

    /*margin-top: 3%;*/
    /*background-color: #20b0f7;*/
  }

  .background {
    background: url('../../../static/imgs/bind_phone_background.png') no-repeat;
    height: 100%;
    background-size: contain;
  }

  .input-box {
    padding: 60% 8% 0;
  }

  .verification-code {
    display: inline-block;
    border-radius: 3px;
    width: 35%;
    background-color: white;
    border-left: none;
    float: right;
    height: 0.8rem
  }

  .verification-code-input {
    width: 65%;
    border-right: none;
  }

  .submit {
    text-align: center;
    margin-top: 0.5rem
  }

  .btn-submit {
    width: 100%;
    background-color: #ffe300;
    color: #734f05;
    font-size: 0.5rem
  }

  .attention {
    text-align: center;
    width: 100%
  }

  .btn-attention {
    color: white;
  }


</style>
